import React, { Component, Suspense, lazy } from "react";
import Solt from "./solt/solt";
import Bus from "./bus/bus";
import MyInput from "./myInput/myInput";

let Componentchild = lazy(() => import("./componentchild/componentchild"));
// 创建一个context对象。组件会向组件所处的树中距离最近的那个Provider进行匹配context。当组件所处的树没有匹配到Provider (不使用Provider组件) 时，defaultValue参数才会生效。
export const { Provider, Consumer } = React.createContext("默认值");

class component extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "",
      money: "100元",
    };
    // 获取这个 ref
    this.myInput = React.createRef();
    this.myInput1 = React.createRef();
  }

  // 获取焦点(自定义组件调用)
  clickfocus1() {
    // 使用原生的 DOM API 获取焦点
    this.myInput1.current.childEvent();
  }

  // 获取焦点
  clickfocus() {
    // 使用原生的 DOM API 获取焦点
    this.myInput.current.focus();
  }

  onRef(ref) {
    this.componentchild = ref;
  }

  click = (e) => {
    this.componentchild.childEvent();
  };

  callback2(a, b, c) {
    console.log(a, b, "============");
    this.setState({
      title: a,
    });
  }
  render() {
    return (
      <div>
        <div onClick={this.clickfocus1.bind(this)}>父组件调用子组件</div>
        <MyInput ref={this.myInput1}></MyInput>
        <div onClick={this.clickfocus.bind(this)}>获取普通组件聚焦点</div>
        <input type="text" ref={this.myInput} />
        我是父组件
        {/* 箭头函数 自动绑定 this指向 */}
        {/* <button onClick={this.click}>父组件调用子组件</button> */}
        <button
          onClick={() => {
            this.componentchild.childEvent();
          }}
        >
          父组件调用子组件---{this.state.title}
        </button>
        <Suspense fallback={<div>loading...</div>}>
          <Componentchild onRef={this.onRef.bind(this)}></Componentchild>
          <Componentchild
            onRef={(ref) => {
              this.componentchild = ref;
            }}
            callback={this.callback2.bind(this)}
            componentchild={"父组件传数据"}
          ></Componentchild>
        </Suspense>
        {/* 组件插槽 */}
        <Solt>
          <span>我是插槽1</span>
          <span>我是插槽2</span>
          <span>我是插槽3</span>
        </Solt>
        ------------隔代传值
        <Provider value={this.state.money}>
          <Bus></Bus>
        </Provider>
        ------------隔代传值
      </div>
    );
  }
}

export default component;

// //父组件
// import React, {Component} from 'react';

// export default class Parent extends Component {
//     render() {
//         return(
//             <div>
//                 <Child onRef={this.onRef} />
//                 <button onClick={this.click} >click</button>
//             </div>
//         )
//     }

//     onRef = (ref) => {
//         this.child = ref
//     }

//     click = (e) => {
//         this.child.childEvent()
//     }

// }

//父组件
// import React, {useRef} from "react";
// import Child from '../Child';

// let Parent = () => {
//   const childRef = useRef();

//   const updateChildState = () => {
//     console.log('调用子组件：', childRef)
//     // changeVal就是子组件暴露给父组件的方法
//     childRef.current.changeVal('哈哈');
//   }

//   return (
//     <div>
//      <button onClick={updateChildState}>触发子组件方法</button>
//      <Child ref={childRef} />
//     </div>
//   );
// }
// export default Parent;
